<template>
  <el-row :class="'inter-course-box'">
    <!-- <div class="sub-module-title">简历进展概况</div> -->
    <HPModuleTitle titleText="面试时间进程"></HPModuleTitle>
    <div v-if="list.length" class="courses-box">
      <span class="bg-line"></span>
      <el-row :class="'courses-container'">
        <div v-for="(item, index) in list" :key="index">
          <div :class="'inter-course-detail-box'">
            <el-col :span="5" class="user-icon-box">
              <div class="icon-box">
                <span
                  :class="['iconfont course-icon icon-rili course-arrage']"
                ></span>
              </div>
              <div class="user-box">
                <p class="user-name">{{ item.createrName }}</p>
                <span class="user-time">{{ item.createDate | getTime }}</span>
                <span class="user-date">{{ item.createDate | getDate }}</span>
              </div>
            </el-col>
 
            <el-col :span="19" :class="'course-main-box'">
              <span class="iconfont icon-icon-top-copy main-box-icon"></span>
              <el-row class="course-detail-container passed-detail ">
                <el-col :span="24" class="info-item info-item-flex">
                  <span class="info-item-tip">候选人面试时间 </span>
                  <span class="sign">:</span>
                  <span class="info-item-txt wrap-text">{{
                    item.originType === 1? `${ filterSecond(item.interviewStartDate)} - ${ filterSecond(item.interviewEndDate) }`: filterSecond(item.interviewStartDate)
                  }}</span>
                  <span class="detail-title">第{{ item.interview_num }}轮面试安排</span>
                </el-col>
                <el-col :span="24" class="info-item info-item-flex">
                  <span class="info-item-tip">备注 </span>
                  <span class="sign">:</span>
                  <p class="info-item-txt">{{item.interviewRemarks}}</p>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </div>
      </el-row>
    </div>
    <el-empty v-else description=""></el-empty>
  </el-row>
</template>
<script>
import HPModuleTitle from "../HPModuleTitle";
export default {
  components: {
    HPModuleTitle,
  },
  props: {
    courseInfos: {
      type: [Object, Array],
      default: () => {
        return [];
      },
    },
  },
  watch: {
    courseInfos: {
      deep: true,
      handler: function(val) {
        const { num } = this.$route.query
        const arr = []
        console.log('--------------------------')
        console.log(val)
        val.forEach(item => {
          if(item.details.interview_num <= num && item.details.type === 4) {
            const interviewList = item.details.interviewList.map(it => {
              return {
                ...it,
                interview_num: item.details.interview_num
              }
            })
            arr.push(...interviewList)
          }
        })
        if(arr.length) {
          this.list = arr
          // console.log(this.list)
        }
      }
      }
  },
  methods: {
    filterSecond (val) {
      if(!val) return val
      return val.slice(0, 16);
    },
  },
  filters: {
    getTime: function (val) {
      let tempStr = "";
      if (val) {
        tempStr = val.substring(val.indexOf(" "), val.lastIndexOf(":"));
      }
      return tempStr;
    },
    getDate: function (val) {
      let tempStr = "";
      if (val) {
        tempStr = val.substring(0, val.indexOf(" "));
      }
      return tempStr;
    },
  },
  data() {
    return {
      list: []
    };
  },
  beforeMount() {
    console.log("进来了？？");
    const { num } = this.$route.query
    const arr = []

    this.courseInfos.forEach(item => {
      if(item.details.interview_num <= num && item.details.type === 4) {
        const interviewList = item.details.interviewList.map(it => {
          return {
            ...it,
            interview_num: item.details.interview_num
          }
        })
        arr.push(...interviewList)
      }
    })
    if(arr.length) {
      this.list = arr
    }
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/mixins.scss";

.inter-course-box {
  padding: 20px 20px 0 20px;
  background-color: #fff;
  margin-bottom: 20px;
  height: auto;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  border-radius: 6px;
  .info-item-flex {
    .detail-title {
      flex: 1;
      text-align: right;
    }
  }
  .courses-box {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .bg-line {
    display: inline-block;
    width: 4px;
    height: 100%;
    overflow: hidden;
    background-color: $-bakcground-secondary;
    float: left;
    position: absolute;
    top: 66px;
    left: 35px;
  }
  .courses-container {
    width: 100%;
    padding-top: 25px;
    height: auto;
    overflow: hidden;
    border: 1px solid #eee;
    // border-radius: 3px;
  }
  .info-item-tip {
    width: auto !important;
    min-width: 60px !important;
    padding-right: 10px;
  }
  .user-icon-box {
  display: flex;
  .user-box {
    min-width: 80px;
    float: left;
    height: auto;
    padding: 0 0 0 10px;
    max-width: 170px;
    span {
      display: block;
      text-align: left;
      width: 80px;
      line-height: 22px;
      font-size: 12px;
    }
    .user-name {
      font-family: "Microsoft YaHei";
      font-size: 12px;
      line-height: 24px;
      color: #636363;
      text-align: left;
    }
    .user-time{
      font-size: 12px;
      font-weight: bold;
      color: #636363;
    }
    .user-date {
      color: #bcbcbc;
    }
  }
  @media (max-width: 1600px) {
    .user-box {
      width: 80px;
    }
  }
  .icon-box {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    .course-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      color: #fff;
      display: inline-block;
      font-size: 20px;
      text-align: center;
      line-height: 48px;
      border: 3px solid $-bakcground-secondary;
    }
    .course-info {
      background-color: $main-color;
    }
    .course-arrage {
      background-color: $-bakcground-secondary;
    }
    .course-tran-sign {
      background-color: #ff525d;
    }
  }
}
}

.inter-course-detail-box {
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
    .course-main-box {
      background-color: #fafafa;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 15px;
      position: relative;
      .main-box-icon {
        position: absolute;
        top: 10px;
        left: -20px;
        font-size: 36px;
        color: #fafafa;
      }
    }
  }
  .course-detail-container {
    text-align: left;
    .detail-title {
      font-size: 14px;
      font-weight: bold;
      color: $main-color;
      width: 100%;
      height: 35px;
      line-height: 35px;
    }
    .sub-detail-title {
      margin-top: 10px;
      font-size: 14px;
      font-weight: bold;
      text-indent: 10px;
      line-height: 16px;
      color: $main-color;
      width: 100%;
      border-left: 4px solid $main-color;
    }
    .info-item {
      display: inline-block;
      font-size: 14px;
      color: #636363;
      text-align: left;
    }

    .info-item-flex {
      display: flex;
      p {
        flex: 1;
        height: auto;
        word-break: break-all;
      }
    }
    .resume-info-item-back {
      width: 100%;
    }
    .info-item-tip {
      width: 60px;
      height: 32px;
      line-height: 32px;
      text-align: left;
      float: left;
      font-size: 14px;
    }
    .sign {
      float: left;
      height: 32px;
      width: 10px;
      line-height: 32px;
    }
    .info-item-txt {
      float: left;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
    }
    .resume-back-desc {
      height: auto;
      line-height: 19px;
      margin-top: 7px;
      width: 80%;
    }
    .course-sub-detail {
      // border: 1px solid #fcecd2;
      background-color: #ffe5ee;
      padding: 8px 15px;
      margin-top: 10px;
      .info-item-tip {
        width: 80px;
        height: 32px;
        line-height: 32px;
        text-align: left;
        float: left;
        font-size: 12px;
      }
    }
    .res-item-txt {
      width: 80%;
      line-height: 22px;
      margin-top: 5px;
      height: auto;
      word-wrap: break-word;
    }
  }
  .passed-detail {
    .info-item-tip {
      width: 90px;
    }
  }
</style>
